<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/util.js"></script>
    <script>

        window.onload=function (){
            findByItem(1)
        }

        function  findByItem(pageNO){
            axios.get("/user/findByItem",{
                params:{
                    pageNO,
                    account:$("account").value
                }
            }).then( e=>{
                var info=e.data;
                var str="";
                for (var i=0;i<info.records.length;i++){
                    var obj=info.records[i];
                    str += `<tr><td>${obj.account}</td><td>${obj.name}</td><td><a href="javascript:del(${obj.id})">删除用户</a><a href="/user/update.html?id=${obj.id}">修改权限</a> </td></tr>`
                }
                $("userDate").innerHTML=str

                var pageStr="";
                for(var i=1;i<=info.pages;i++){
                    pageStr +=  `<a href="javascript:findByItem(${i})">${i}`
                }
                $("cutPageDiv").innerHTML=pageStr;

            });

        }

        function  del(id){
            axios.get("/user/del",{
                params: {id}
            }).then(e =>{
                if (e.data=="ok"){
                    findByItem(1)
                }
            })
        }

    </script>
</head>
<body>
<h2>用户管理</h2>
<table border="1" width="90%" cellspacing="0">
    <thead>
    <tr><td>用户名</td><td>真实姓名</td><td>操作</td></tr>
    </thead>
    <tbody id="userDate"></tbody>
</table>
<div style="margin: 10px;" id="cutPageDiv"></div>
<div style="display: flex">
    <div style="width: 300px;">
        <a href="/user/add.html">添加用户</a>
    </div>
    <div style="width: 300px;">
        用户名：<input type="text" id="account"><br>
        <input type="button" value="查询" onclick="findByItem(1)">
    </div>
</div>

</body>
</html>